<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"
         pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="${pageContext.request.contextPath }/assets/img/registerLogo.png">
    <!-- CSS -->
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700'>
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Oleo+Script:400,700'>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/style.css">
    <style type="text/css">

        video {
            position: fixed;
            right: 0px;
            bottom: 0px;
            min-width: 100%;
            min-height: 100%;
            height: auto;
            width: auto;

            filter: blur(15px);

            z-index: -11;
        }

        source {
            min-width: 100%;
            min-height: 100%;
            height: auto;
            width: auto;
        }

    </style>
</head>

<body>
<video autoplay muted loop>
    <source src="${pageContext.request.contextPath }/staticfile/img/qbs.mp4" type="video/mp4"/>
</video>
<div class="header">
    <div class="container">
        <div class="row">
            <div class="logo span4">
                <h1 title="欢迎加入PIGS"><a href="">PIGS-BANK <span class="red">注册</span></a></h1>
            </div>
            <div class="links span8">
                <a class="home" href="${pageContext.request.contextPath }/login" rel="tooltip" data-placement="bottom"
                   data-original-title="已有账户??"></a>
                <a class="blog" href="" rel="tooltip" data-placement="bottom" data-original-title="需要帮助??"></a>
            </div>
        </div>
    </div>
</div>

<div class="register-container container">
    <div class="row">
        <div class="iphone span5">
            <img src="${pageContext.request.contextPath }/assets/img/logoko.png" alt="PIGS" id="img">
        </div>
        <div class="register span6">
            <form id="from" method="post" action="${pageContext.request.contextPath}/user/register">
                <h2>加入 <span class="red"><strong>PIGS-BANK</strong></span></h2>
                <h3><i id="msg"></i></h3>
                <label for='accountName'>用户名<i id="msg1"></i></label>
                <input type="text" id="accountName" name="accountName" placeholder="请输入用户名	..." style="background: none">

                <label for="phone">手机号码<i id="msg2"></i></label>
                <input type="text" id="phone" name="phone" placeholder="请输入手机号名..." style="background: none">

                <label for="email">电子邮箱<i id="msg3"></i></label>
                <input type="text" id="email" name="email" placeholder="请输入电子邮箱..." style="background: none">

                <label for="password">密码<i id="msg4"></i></label>
                <input type="password" id="password" name="password" placeholder="请输入密码..." style="background: none">

                <button type="submit" id="btnRegister">注册</button>
            </form>
        </div>
    </div>
</div>

</div>
<!-- Javascript -->
<script src="${pageContext.request.contextPath }/assets/js/jquery-1.8.2.min.js"></script>
<script src="${pageContext.request.contextPath }/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath }/assets/js/jquery.backstretch.min.js"></script>
<script>
    $(function () {

        /*
            Tooltips
        */
        $('.links a.home').tooltip();
        $('.links a.blog').tooltip();

        /*
            Form validation
        */

        $('#btnRegister').click(function () {
            var accountName = $('input#accountName').val();
            var phone = $('input#phone').val();
            var email = $('input#email').val();
            var password = $('input#password').val();

            if (accountName == '') {
                $("#msg1").html("<span class='red'>&nbsp; -请输入用户名.</span>").show(3500).delay(1500).hide(3000);
                return false;
            }

            if (phone == '') {
                $("#msg2").html("<span class='red'> &nbsp; - 请输入手机号码.</span>").show(3500).delay(1500).hide(3000);
                return false;
            } else {
                var pattern = /^1[34578]\d{9}$/;
                if (!pattern.test(phone)) {
                    $("#msg2").html("<span class='red'> &nbsp; - 手机号码格式不正确，请重新填写.</span>").show(3500).delay(1500).hide(3000);
                    return false;
                }
            }

            if (email == '') {
                $("#msg3").html("<span class='red'> &nbsp; - 请输入电子邮箱.</span>").show(3500).delay(1500).hide(3000);
                return false;
            } else {
                var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
                if (!reg.test(email)) {
                    $("#msg3").html("<span class='red'> &nbsp; - 邮箱格式不正确，请重新填写!.</span>").show(3500).delay(1500).hide(3000);
                    return false;
                }
            }

            if (password == '') {
                $("#msg4").html("<span class='red'> &nbsp; - 请输入密码.</span>").show(3500).delay(1500).hide(3000);
                return false;
            }

            if (accountName != '' && phone != '' && email != '' && password != '') {
                $.ajax({
                    data: {
                        accountName: $("#accountName").val(),
                        phone: $("#phone").val(),
                        email: $("#email").val(),
                        password: $("#password").val(),
                    },
                    dataType: 'json',
                    type: 'post', //HTTP请求类型
                    cache: false,
                    xhrFields: {widthCredentials: true}
                });
                $("#msg1").html("<span class='red'>&nbsp; -${msg}.</span>").show(3500).delay(1500).hide(3000);
            }
        })
    })
</script>


</body>
</html>